import React, { Component } from 'react'
import styles from './index.less'
import { Tooltip } from 'antd';

export default class Battery extends Component {
    render() {
        return (
            <Tooltip placement="bottom" title={this.props.percent + '%'}>
                <div className={styles.battery}>
                    <div className={styles.box} style={{ borderColor: this.props.color }}>
                        <div className={styles.percent} style={{ backgroundColor: this.props.color, width: this.props.percent + '%' }}>
                        </div>
                    </div>
                    <div className={styles.dot} style={{ backgroundColor: this.props.color }}></div>
                </div>
            </Tooltip>
        )
    }
}
